<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
    @cancel="handleCancel"
  >

    <a-spin :spinning="confirmLoading">
      <a-form :form="form" style="text-align: center">
        <table  style="width: 90%; text-align: left " >
          <tr class="trpadd">
            <td>
              <span class="subtitle">投诉对象:</span>
              {{model.complaintTo}}
            </td>
            <td>
              <span class="subtitle">企业名称:</span>
              {{model.enterpriseName}}
            </td>
          </tr>
          <tr class="trpadd" v-if="this.verdict=='2'">
            <td>
              <span class="subtitle">销售顾问（姓名、工号）:</span>
              {{model.salesNameWorkno}}
            </td>
            <td>
              <span class="subtitle">顾问电话:</span>
              {{model.salesPhone}}
            </td>
          </tr>
          <tr class="trpadd">
            <td>
              <span class="subtitle">记录日期:</span>
              {{model.recordDate}}
            </td>
            <td>
              <span class="subtitle">记录人员:</span>
              {{model.recordBy}}
            </td>
          </tr>
          <tr class="trpadd">
            <td>
              <span class="subtitle">问题类型:</span>
              {{model.complaintType}}
            </td>
            <td>
              <span class="subtitle">经营地址:</span>
              {{model.oprationAddr}}
            </td>
          </tr>
          <tr class="trpadd" >
            <td colspan="2">
              <div class="two-subtitle" style="padding-top: 0">问题描述:</div>
              <a-textarea :disabled=true :value="model.complaintDesc"></a-textarea>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <div class="two-title" style="font-size: 16px; font-weight: 600; border-bottom: 1px solid #e8e8e8;padding: 15px 0">处理情况</div>
            </td>
          </tr>
          <tr class="trpadd">
            <td>
              <div class="two-subtitle">是否反馈给用户:</div>
              <!--{{model.fdbkUserByPhone}}-->
              <a-radio-group  v-model="model.fdbkUserByPhone" :options="options" @change="onChange">
              </a-radio-group>
            </td>
            <td>
              <div class="two-subtitle">处理状态:</div>
              <a-select  placeholder="处理状态" v-model="model.complaintStatus">
                <a-select-option value="待处理">待处理</a-select-option>
                <a-select-option value="已处理">已处理</a-select-option>
                <a-select-option value="疑难">疑难</a-select-option>
              </a-select>
            </td>
          </tr>
          <tr class="trpadd">
            <td colspan="2">
              <div class="two-subtitle">反馈时间:</div>
              <a-date-picker v-model="model.fdbkUserDate" />
            </td>
          </tr>
          <tr class="trpadd">
            <td colspan="2">
              <div class="two-subtitle">反馈人员:</div>
              <a-input v-model="model.feedbackBy"/>
            </td>
          </tr>
          <tr class="trpadd">
            <td colspan="2">
              <div class="two-subtitle">反馈内容:</div>
              <a-textarea v-model="model.feedbackDesc"/>
            </td>
          </tr>

        </table>
      </a-form>
      <div class="btn">
        <a-button type="primary" class="submit" @click="handleOk">提交</a-button>
        <a-button type="primary" class="cancel" @click="handleCancel">返回</a-button>
      </div>
    </a-spin>
  </a-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from "moment"

const options = [
  { label: '是', value: '1' },
  { label: '否', value: '0' },
];
export default {
  name: "CxmComplaintRecordModal",
  data () {
    return {
      title:"投诉记录详情",
      visible: false,
      model: {},
      verdict:'',
      value: 1,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      options,
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules:{
      },
      url: {
        add: "/cxm/cxmComplaintRecord/add",
        edit: "/cxm/cxmComplaintRecord/edit",
      },
    }
  },
  created () {
  },
  methods: {
    add () {
      this.edit({});
    },
    edit (record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      //判断是否为经销商投书信息
      if(this.model!=null){
        this.model.complaintTo=='经销商'?this.verdict='1':this.verdict='2';
      }
      this.visible = true;
      this.$nextTick(() => {
        // this.form.setFieldsValue(pick(this.model,'complaintTo','enterpriseName','oprationAddr','salesNameWorkno','salesPhone','complaintType','complaintDesc','recordBy','feedbackDesc','feedbackBy','complaintStatus','fdbkUserByPhone','enterpriseId','salesId','createUser','updateUser'))
        //时间格式化
        this.model.recordDate?moment(this.model.recordDate):null;
        this.model.feedbackDate?moment(this.model.feedbackDate):null;
        this.model.fdbkUserDate?moment(this.model.fdbkUserDate):null;
        // this.form.setFieldsValue({recordDate:this.model.recordDate?moment(this.model.recordDate):null})
        // this.form.setFieldsValue({feedbackDate:this.model.feedbackDate?moment(this.model.feedbackDate):null})
        // this.form.setFieldsValue({fdbkUserDate:this.model.fdbkUserDate?moment(this.model.fdbkUserDate):null})
      });

    },
    close () {
      this.$emit('close');
      this.visible = false;
    },
    handleOk () {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
            method = 'put';
          }
          console.log(this.model)
          this.model.fdbkUserDate?this.model.fdbkUserDate.format():null;

          httpAction(httpurl,this.model,method).then((res)=>{
            if(res.success){
              that.$message.success(res.message);
              that.$emit('ok');
            }else{
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })



        }
      })
    },
    handleCancel () {
      this.close()
    },

    onChange(e) {
      console.log('radio checked', e.target.value);
    },

  }
}
</script>

<style lang="less" scoped>
.trpadd{
  td {
    padding: 10px 0;
  }
  .subtitle {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
  }
  .two-subtitle {
    font-weight: bold;
    padding: 10px 0;
  }
}
  .btn {
    margin: 30px 0;
    .submit, .cancel {
      margin-right: 10px;
    }
  }
</style>